<template>
	<view>
		<view class="content">
			<view v-if="list.length>0">
				<view class="list" v-for="(item,index) in list" :key="index">
					<view class="head">
						<image :src="img_pre+item.fang_manor_logo" mode=""></image>
					</view>
					<view class="right">
						<view class="view">
							<view class="name">
								蜂巢价值
							</view>
							<view class="number">
								{{item.manor_price}} <text> Ghy</text>
							</view>
						</view>
						<view class="view">
							<view class="name">
								兑换时间
							</view>
							<view class="text">
								{{item.createtime}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="none" v-else>
				<view class="none-view">
					<image src="../../../static/image/none.png" class="none-image"></image>
					<view class="none-name">
						暂无相关数据~
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				list: [],
				page: 1
			}
		},
		onLoad(option) {
			than = this;
			than.getlist()
		},
		onReachBottom() {
			than.page++;
			than.getlist()
		},
		methods: {
			getlist() {
				than.post("api/Goldbean/exchangLog", {
					page: than.page
				}, function(data) {
					for (let i in data) {
						data[i].show = true
					}
					if (than.page == 1) {
						than.list = data;
					} else {
						than.list = than.list.concat(data)
					}
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #FAFAFA;
	}

	.content {
		padding-top: 20rpx;
		width: 100%;

		.list {
			margin: 0 auto 24rpx;
			background: #FFFFFF;
			width: 678rpx;
			border-radius: 20rpx;
			height: 205rpx;
			position: relative;
			display: flex;
			align-items: center;

			.right {
				.view {
					display: flex;
					align-items: center;
					height: 60rpx;

					.name {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						margin-right: 16rpx;
					}

					.text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}

					.number {
						font-size: 32rpx;
						font-family: DINCond-Black;
						font-weight: bold;
						color: #F46813;

						text {
							font-size: 28rpx;
						}
					}
				}
			}

			.head {
				width: 144rpx;
				height: 144rpx;
				margin: 0 24rpx;
				border-radius: 10rpx;
				text-align: center;

				image {
					width: 100%;
					height: 100%;
				}

				.name {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
				}
			}

			.a1 {
				background: #FFF4EE;
				color: #C2765B;
			}

			.a2 {
				background: #F7F7F7;
				color: #8287A4;
			}

			.a3 {
				background: #FFFCEE;
				color: #C6891E;
			}

			.a4 {
				background: #F4F4F4;
				color: #AB8154;
			}
		}
	}
</style>
